<template>
  <div style="width: 200px; margin: 0 auto">
    <div><button @click="title1 = !title1">按钮1</button></div>
    <transition @enter="enter" @leave="leave" :css="false">
      <h2 v-if="title1">hellow1</h2>
    </transition>
    <!-- 只能输入整数 -->
    <el-input type="text" v-model="obj.number1" @input="handleInput1" />
    计数器：{{ cpdshowNumber1 }}
    <br />
    <div>
      <!-- 能输入整数也能输入小数,并且保留2位小数 -->
      <el-input
        type="number"
        v-model="obj.number2"
        :min="1"
        :max="5"
        @keydown="handleKeydown"
        @input="handleInt"
      />
      计数器：{{ cpdshowNumber2 }}
    </div>
  </div>
</template>

<script setup>
import { ref, watch, reactive, watchEffect, computed,version,onMounted,defineEmits  } from "vue";
import gsap from "gsap";
console.log(version,6541000)
const title1 = ref(true);
const num = ref(1);
const enter = (el, done) => {
  console.log(el, "89966");
  gsap.from(el, {
    scale: 0,
    x: 200,
    onComplete: done,
  });
  gsap.to(el, {
    scale: 1,
    x: 0,
    onComplete: done,
  });
};
const leave = (el, done) => {
  gsap.to(el, {
    scale: 0,
    x: 200,
    onComplete: done,
  });
};

const obj = reactive({
  number1: "",
  showNumber1: 0,
  number2: "",
  showNumber2: 0,
});

const cpdshowNumber1 = computed(() => obj.showNumber1.toFixed(0));
watchEffect(() => {
  gsap.to(obj, {
    duration: 1,
    showNumber1: +obj.number1,
  });
});

const handleInput1 = () => {
  obj.number1 = obj.number1 == "0" ? "" : obj.number1.replace(/[^\d]/g, "");
  console.log(typeof obj.number1, "00");
};
//不允许用户往里面输入​​'e'和'+'、'-'
const handleKeydown = (e) => {
  let key = e.key;
  if (key == "e" || key == "+" || key == "-") {
    e.returnValue = false;
    return false;
  } else {
    return true;
  }
};
const handleInt = () => {
  if (obj.number2 == 0) {
    obj.number2 = "";
  } else {
    if (obj.number2 > 5) {
      obj.number2 = 5;
    } else {
      if (obj.number2.length > 4) {
        obj.number2 = obj.number2.substring(0, 4);
      }
    }
  }
  console.log(obj.number2, typeof obj.number2, "635");
};

const cpdshowNumber2 = computed(() => obj.showNumber2.toFixed(2));
watchEffect(() => {
  gsap.to(obj, {
    duration: 1,
    showNumber2: +obj.number2,
  });
});
// watch(()=>obj.number,(nVal)=>{
//   gsap.to(obj,{
//     duration:1,
//     showNumber:+nVal
//   })
// })
</script>

<style scoped></style>
